<template>
  <Card>
    <Form ref="searchCardForm" :label-width="90" :model="searchCardForm" inline>
      <Form-item label="车辆线路：" prop="line">
        <Select v-model="searchCardForm.line" clearable placeholder="选择线路" style="width:200px;">
          <Option value="-1">全部</Option>
          <Option v-for="item in lines" :key="item.value" :value="item.value">{{ item.label }}</Option>
        </Select>
      </Form-item>
      <Form-item label="车牌号：" prop="license_plate_num">
        <Input
          v-model="searchCardForm.license_plate_num"
          clearable
          placeholder="支持模糊搜索"
          style="width: 200px"
          type="text"
        />
      </Form-item>
      <Form-item label="日期范围：" prop="date">
        <DatePicker
          v-model="searchCardForm.date"
          format="yyyy-MM"
          placeholder="请选择月份"
          placement="bottom-start"
          style="width: 200px"
          type="month"
          @on-change="dateChange"
        ></DatePicker>
      </Form-item>
      <Form-item style="margin-left:-90px;">
        <Button icon="md-search" type="primary" @click="handleSearch()">搜索</Button>
        <Button @click="handleReset()">重置</Button>
      </Form-item>
    </Form>
    <Button icon="md-cloud-download">导出</Button>
    <Divider/>
    <Table :columns="columns" :data="data" border></Table>
    <Page
      :current="searchForm.pageNumber"
      :page-size="searchForm.pageSize"
      :total="total"
      show-total
      style="text-align:right;margin-top:15px"
      @on-change="changePage"
    />
  </Card>
</template>
<script>
export default {
  data() {
    return {
      total: 0,
      searchForm: {
        brand: '-1',
        type: '-1',
        license_plate_num: '',
        pageNumber: 1, // 当前页数
        pageSize: 10 // 页面大小
      },
      searchCardForm: {
        line: '-1',
        license_plate_num: '',
        date: '',
        pageNumber: 1,
        pageSize: 10
      },
      lines: [],
      columns: [
        {
          title: '线路',
          key: 'line',
          width: 120,
          align: 'center'
        },
        {
          title: '车牌号',
          key: 'License',
          width: 120,
          align: 'center'
        },
        {
          title: '气耗',
          key: 'consume',
          width: 120,
          align: 'center'
        },
        {
          title: '顺康',
          key: 'shunkang',
          width: 120,
          align: 'center'
        },
        {
          title: '逸华',
          key: 'yihua',
          width: 120,
          align: 'center'
        },
        {
          title: '公里',
          key: 'kilometer',
          width: 120,
          align: 'center'
        },
        {
          title: '本月',
          key: 'thisMonth',
          width: 120,
          align: 'center'
        },
        {
          title: '上月',
          key: 'lastMonth',
          width: 120,
          align: 'center'
        },
        {
          title: '收入',
          key: 'income',
          width: 120,
          align: 'center'
        },
        {
          title: '气耗/天',
          key: 'dayConsume',
          width: 120,
          align: 'center'
        },
        {
          title: '元/百公里',
          key: 'money',
          width: 120,
          align: 'center'
        },
        {
          title: 'm³/百公里',
          key: 'cube',
          width: 120,
          align: 'center'
        },
        {
          title: '气量合计',
          key: 'gasTotal',
          width: 120,
          align: 'center'
        },
        {
          title: '气量(顺康）',
          key: 'shunkangGas',
          width: 120,
          align: 'center'
        },
        {
          title: '气量(逸华）',
          key: 'yihuaGas',
          width: 120,
          align: 'center'
        },
        {
          title: '收入/百公里',
          key: 'revenue',
          width: 120,
          align: 'center'
        },
        {
          title: '排名',
          key: 'rank',
          width: 120,
          align: 'center'
        },
        {
          title: '气耗/趟',
          key: 'single',
          width: 120,
          align: 'center'
        },
        {
          title: '往返里程',
          key: 'roundTrip',
          width: 120,
          align: 'center'
        },
        {
          title: '收入/趟',
          key: 'singleIncome',
          width: 120,
          align: 'center'
        },
        {
          title: '掉趟',
          key: 'dropOff',
          width: 120,
          align: 'center'
        },
        {
          title: '备注',
          key: 'remark',
          width: 120,
          align: 'center'
        }
      ],
      data: [
        {
          line: '1',
          License: '陕G18022',
          consume: 500,
          shunkang: 100,
          yihua: 400,
          kilometer: 3000,
          thisMonth: 50000,
          lastMonth: 40000,
          income: 5000,
          dayConsume: 50,
          money: 800,
          cube: 50,
          gasTotal: 1000,
          shunkangGas: 800,
          yihuaGas: 200,
          revenue: 2000,
          rank: 1,
          single: 30,
          roundTrip: 600,
          singleIncome: 200,
          dropOff: 2
        },
        {
          line: '1',
          License: '陕G18022',
          consume: 500,
          shunkang: 100,
          yihua: 400,
          kilometer: 3000,
          thisMonth: 50000,
          lastMonth: 40000,
          income: 5000,
          dayConsume: 50,
          money: 800,
          cube: 50,
          gasTotal: 1000,
          shunkangGas: 800,
          yihuaGas: 200,
          revenue: 2000,
          rank: 1,
          single: 30,
          roundTrip: 600,
          singleIncome: 200,
          dropOff: 2
        },
        {
          line: '1',
          License: '陕G18022',
          consume: 500,
          shunkang: 100,
          yihua: 400,
          kilometer: 3000,
          thisMonth: 50000,
          lastMonth: 40000,
          income: 5000,
          dayConsume: 50,
          money: 800,
          cube: 50,
          gasTotal: 1000,
          shunkangGas: 800,
          yihuaGas: 200,
          revenue: 2000,
          rank: 1,
          single: 30,
          roundTrip: 600,
          singleIncome: 200,
          dropOff: 2
        },
        {
          line: '1',
          License: '陕G18022',
          consume: 500,
          shunkang: 100,
          yihua: 400,
          kilometer: 3000,
          thisMonth: 50000,
          lastMonth: 40000,
          income: 5000,
          dayConsume: 50,
          money: 800,
          cube: 50,
          gasTotal: 1000,
          shunkangGas: 800,
          yihuaGas: 200,
          revenue: 2000,
          rank: 1,
          single: 30,
          roundTrip: 600,
          singleIncome: 200,
          dropOff: 2
        }
      ]
    }
  },
  mounted() {
    this.getLinesArray()
  },
  methods: {
    async getLinesArray() {
      this.lines = await this.getLines()
    },
    changePage() {
    },
    dateChange(e) {
      this.searchCardForm.date = e
    },
    handleReset() {
      this.searchCardForm = {
        line: '-1',
        license_plate_num: '',
        // date: [null,null],
        pageNumber: 1,
        pageSize: 10
      }
    },
    handleSearch() {
      // console.log(this.searchCardForm)
    }
  }
}
</script>
